<template>
  <Detail-dialog
    modal
    width="35"
    :title="title"
    :show.sync="dialogShow" @close="close" @save="save('dataForm')">
        <el-form ref="dataForm" label-width="90px" :model="positionInfo" :rules="rules">
              <el-row>
                  <el-col :span="12">
                    <el-form-item label="职位名称" prop="positionName">
                    <el-input class="wp-form-280" clearable v-model="positionInfo.positionName" placeholder="职位名称"></el-input>
                 </el-form-item>
                  </el-col>
              </el-row>
              <el-row>
              <el-col :span="12">
                <el-form-item  label="直属部门" prop="departmentCode">
                <Select-Depart
                  clearable v-model="positionInfo.departmentCode"></Select-Depart>
                 </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                    <el-form-item  label="状态" prop="status">
                        <el-tooltip :content="status==1?'有效':'无效'" placement="top">
                        <el-switch
                            v-model="status"
                            :active-value="1"
                            :inactive-value="0">
                        </el-switch>
                        </el-tooltip>
                    </el-form-item>
                </el-col>
              </el-row>
        </el-form>
  </Detail-dialog>
</template>

<script>
import DetailDialog from '@/components/DetailDialog'
import SelectDepart from '@/views/system/components/department/select'

export default {
  props: {
    isCreate: {type: Boolean, default: true},
    visible: Boolean,
    title: String,
    data: {type: Object,
      default: () => {
        return {}
      }}
  },
  components: {DetailDialog, SelectDepart},
  watch: {
    visible: {
      handler (val) {
        this.dialogShow = val
      },
      immediate: true
    },
    dialogShow (val) {
      this.$emit('update:visible', val)
    },
    data: {
      handler (val) {
        if (val) {
          this.positionInfo = {...val}
          this.status = this.isCreate ? 1 : val.status
        }
      },
      deep: true,
      immediate: true
    }
  },
  data () {
    return {
      dialogShow: false,
      status: 1,
      positionInfo: {},
      rules: {
        positionName: [{ required: true, message: '不能为空', trigger: 'blur' }],
        departmentCode: [{ required: true, message: '不能为空', trigger: 'blur' }]
      }
    }
  },
  methods: {
    close () {
      this.dialogShow = false
    },
    save (form) {
      this.$refs[form].validate(validate => {
        if (validate) {
          this.positionInfo.status = this.status
          this.$emit('save', this.positionInfo)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
